import { defineComponent } from "vue";

import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";
Vue.component("vue-draggable-resizable", VueDraggableResizable);

import { ConfigProvider, Table } from "ant-design-vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
const columns = [
  {
    title: "Date",
    dataIndex: "date",
    width: 200,
  },
  {
    title: "Amount",
    dataIndex: "amount",
    width: 100,
  },
  {
    title: "Type",
    dataIndex: "type",
    width: 100,
  },
  {
    title: "Note",
    dataIndex: "note",
    width: 100,
  },
  {
    title: "Action",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];
const draggingMap = {};
columns.forEach((col) => {
  draggingMap[col.key] = col.width;
});

export default defineComponent({
  menuName: "table",
  props: {},
  computed: {
    visible: {
      get() {
        return this.visibleModal;
      },
      set(val) {
        this.$emit("update:visibleModal", val);
      },
    },
    rightList() {
      let arr = [];
      if (this.selectedId.length > 0) {
        this.selectedId.forEach((item) => {
          arr.push({
            menuId: item,
            menuName: this.map[item],
          });
        });
      } else {
        arr = [];
      }
      return arr;
    },
  },
  data() {
    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props;
          const col = this.columns.find((col) => {
            const k = col.dataIndex || col.key;
            return k === key;
          });

          if (!col || !col.width) {
            return h("th", { ...restProps }, [...children]);
          }

          const dragProps = {
            key: col.dataIndex || col.key,
            class: "table-draggable-handle",
            attrs: {
              w: 10,
              x: col.width,
              z: 1,
              axis: "x",
              draggable: true,
              resizable: false,
            },
            on: {
              dragging: (x, y) => {
                console.log(x, "xxxxxxx");
                this.$set(col, "width", Math.max(x, 1));
                // col.width = Math.max(x, 1);
              },
            },
          };
          const drag = h("vue-draggable-resizable", { ...dragProps });
          return h("th", { ...restProps, class: "resize-table-th" }, [
            ...children,
            drag,
          ]);
        },
      },
    };
    return {
      data: [
        {
          key: 0,
          date: "2018-02-11",
          amount: 120,
          type: "income",
          note: "transfer",
        },
        {
          key: 1,
          date: "2018-03-11",
          amount: 243,
          type: "income",
          note: "transfer",
        },
        {
          key: 2,
          date: "2018-04-11",
          amount: 98,
          type: "income",
          note: "transfer",
        },
      ],
      draggingState: draggingMap,
      columns: [
        {
          title: "Date",
          dataIndex: "date",
          width: 200,
        },
        {
          title: "Amount",
          dataIndex: "amount",
          width: 100,
        },
        {
          title: "Type",
          dataIndex: "type",
          width: 100,
        },
        {
          title: "Note",
          dataIndex: "note",
          width: 100,
        },
        {
          title: "Action",
          key: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
    };
  },
  methods: {},
  render() {
    const { components, data } = this;
    return (
      <ConfigProvider locale={zhCN}>
        <Table
          bordered
          columns={columns}
          components={components}
          data-source={data}
        >
          <template v-slot:action>
            <a href="javascript:;">Delete</a>
          </template>
        </Table>
      </ConfigProvider>
    );
  },
});
